<template>
  <div class="layout">
    <ZwSearchForm ref="searchRef" row-num="3" :option="searchOption" @search="query" @reset="reset" />
    <ul class="tableData scroll" @scroll="scroll" v-if="violationChat.length !== 0">
      <li v-for="item of violationChat" :key="item.id">
        <div class="all">
          <div class="information">
            <div>{{ item.describe }}</div>
            <div style="display: flex">
              <el-image class="left_img" :src="item.avatar">
                <template #error>
                  <el-image src="/static/file/pic.png"></el-image>
                </template>
              </el-image>
              <!-- <img :src="item.avatar" class="left_img" /> -->
              <div class="bad">
                <div>{{ item.from_name }}</div>
                <div v-if="item.violation_type == 1" style="margin-top: 10px">{{ JSON.parse(item.msg).content || JSON.parse(item.msg).title }}</div>
                <div v-if="item.violation_type == 2" style="margin-top: 10px">发送图片</div>
                <div v-if="item.violation_type == 3" style="margin-top: 10px">发送链接</div>
                <div v-if="item.violation_type == 4" style="margin-top: 10px">发送小程序</div>
                <div v-if="item.violation_type == 5" style="margin-top: 10px">发送名片</div>
                <div v-if="item.violation_type == 6" style="margin-top: 10px">发送红包</div>
                <div v-if="item.violation_type == 7" style="margin-top: 10px">发送音频</div>
                <div v-if="item.violation_type == 8" style="margin-top: 10px">发送视频</div>
                <!-- <div style="margin-top: 10px">{{ item.msg ? JSON.parse(item.msg).title : '暂无数据' }}</div> -->
              </div>
            </div>
          </div>
          <div class="time">
            <div class="times">{{ item.created_at }}</div>
            <div class="context" @click="getContext(item)" v-auth="'ILLEGAL'">查看上下文</div>
          </div>
        </div>
      </li>
      <div v-if="start == false" class="notyet">已经没有更多数据了</div>
    </ul>
    <div v-if="violationChat.length == 0" class="no_data">
      <img class="no_img" src="@/assets/noData.png" alt="" />
      <div class="no_title">暂无数据</div>
    </div>
    <!-- <el-empty v-if="violationChat.length == 0" description="暂无数据" image-size="100"></el-empty> -->
  </div>
  <div>
    <ViewContext ref="DarwerRef" @updateData="updateData" :wx_userid="wx_userid" :data="data" :violationData="violationData" :ltType="ltType" :msgid="msgid" :staff_id="staff_id" :roomid="roomid" :violationChat="violationChat"></ViewContext>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, toRefs, onBeforeMount, onMounted, watch, computed } from 'vue'
  import { getViolationChat, getViolationGroupChat, getViolationContext, getViolationGroupContext } from '@/api/employe/riskmonitoring/violationMonitoring'
  import ViewContext from './ViewContext.vue'
  import ZwSearchForm from '@/components/zw/search-form/SearchForm'
  const props = defineProps(['violationChat', 'wx_userid', 'roomid', 'ltType', 'violationChat', 'chatDetailList'])
  const choices = ref('')
  // 弹框
  const DarwerRef = ref(null)
  const searchRef = ref(null)
  const violationData = ref([])
  const violationChat: any = ref([])
  let times = ref([])
  const emit = defineEmits(['query'])
  const searchOption = computed(() => {
    return [
      {
        label: '违规状态',
        name: 'status',
        value: '',
        type: 'select',
        placeholder: '全部',
        optionList: [
          {
            value: '',
            label: '全部'
          },
          {
            value: 1,
            label: '正常'
          },
          {
            value: 2,
            label: '异常'
          }
        ]
      },
      {
        label: '违规类型',
        name: 'violation_type',
        value: '',
        type: 'select',
        placeholder: '请选择',
        optionList: [
        {
          value: -1,
          name: '全部'
        },
        {
          value: 1,
          name: '敏感词'
        },
        {
          value: 2,
          name: '发送图片'
        },
        {
          value: 3,
          name: '发送链接'
        },
        {
          value: 4,
          name: '发送小程序'
        },
        {
          value: 5,
          name: '发送名片'
        },
        {
          value: 6,
          name: '发送红包'
        },
        {
          value: 7,
          name: '发送音频'
        },
        {
          value: 8,
          name: '发送视频'
        }
        ]
      },
      {
        label: '时间筛选',
        name: 'times',
        value: [],
        type: 'datePicker',
        datePickerType: 'daterange',
        datePickerFormat: 'YYYY-MM-DD HH:mm:ss',  
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        startPlaceholder: '开始日期',
        endPlaceholder: '结束日期'
      }
    ]
  })
  // 获取违规员工和客户的记录
  const chatDetail = (val: any) => {
    let violationPersonnel = {
      wx_userid: props.wx_userid,
      created_at: [],
      violation_type: '', //违规类型 1-敏感词 2--图片 3-链接 4-小程序 5-名片 6-红包 7-音频 8-视频
      page: 1,
      page_size: 10
    }
    console.log(violationPersonnel.wx_userid)

    if (props.ltType == 0) {
      if (violationPersonnel.wx_userid !== '') {
        getViolationChat(violationPersonnel).then(({ data }: any) => {
          console.log(data)
          violationChat.value = data
        })
      }
    } else {
      let violationGroupData = {
        roomid: props.roomid,
        created_at: '',
        violation_type: '',
        page: 1,
        page_size: 10
      }
      if (violationGroupData.roomid !== '') {
        getViolationGroupChat(violationGroupData).then(({ data }: any) => {
          console.log(data)
          violationChat.value = data
        })
      }
    }
    start.value = true
    paged.value = 1
    pageg.value = 1
  }
  const updateData = (v: any) => {
    violationChat.value = v
  }
  const formData = reactive({
    violation_type: '',
    created_at: [],
    status: ''
  })
  // 切换客户群违规置空数据
  watch(
    () => props.ltType,
    () => {
      formData.violation_type = ''
      formData.created_at = []
      formData.status = ''
    },
    { deep: true }
  )
  // 聊天上下文弹框
  const msgid = ref('')
  const staff_id = ref('')
  const roomid = ref('')
  const data = ref({})

  // 查看上下文
  const getContext = (item: any) => {
    DarwerRef.value.showDrawer = true
    if (props.ltType == 0) {
      data.value = item
      DarwerRef.value.start = true
      if (props.ltType == 0) {
        msgid.value = item.msgid
        let contextParams = {
          msgid: item.msgid,
          page: 1,
          page_size: 100,
          is_paging: 2
        }
        getViolationContext(contextParams).then((data: any) => {
          violationData.value = data

          console.log(data, 'data')
        })
      }
    } else {
      msgid.value = item.msgid
      staff_id.value = item.staff_id
      roomid.value = item.roomid
      data.value = item
      DarwerRef.value.start = true
      let groupContextParams = {
        staff_id: item.from_type == 1 ? item.staff_id : item.cust_id,
        roomid: item.roomid,
        page: 1,
        page_size: 100,
        is_paging: 2
      }
      let groupContextParamss = {
        cust_id: item.from_type == 1 ? item.staff_id : item.cust_id,
        roomid: item.roomid,
        page: 1,
        page_size: 100,
        is_paging: 2
      }
      if (item.staff_id !== 0) {
        getViolationGroupContext(groupContextParams).then((data: any) => {
          violationData.value = data
          console.log(data)
        })
      } else {
        getViolationGroupContext(groupContextParamss).then((data: any) => {
          violationData.value = data
          console.log(data)
        })
      }
    }
  }
  const paged = ref(1)
  const pageg = ref(1)
  let start = ref(true)
  const scroll = async () => {
    // console.log(item)
    const el = document.querySelector('.scroll')
    const clientHeight = el?.clientHeight
    const scrollHeight = el?.scrollHeight
    const scrollTop = Math.ceil(el?.scrollTop)
    console.log(scrollHeight, clientHeight)
    console.log(scrollTop)
    console.dir(el)
    if (scrollTop >= scrollHeight - clientHeight) {
      if (!start.value) return
      if (props.ltType == 0) {
        let params = {
          wx_userid: props.wx_userid,
          violation_type: formData.violation_type,
          status: formData.status,
          created_at: formData.created_at,
          page: ++paged.value,
          page_size: 10
        }
        const { data } = await getViolationChat(params)
        console.log('data', data)
        if (data.length === 0) {
          start.value = false
          return console.log('没有数据了')
        }

        violationChat.value.push(...data)
      } else {
        let params = {
          roomid: props.roomid,
          created_at: formData.created_at,
          status: formData.status,
          violation_type: formData.violation_type,
          page: ++pageg.value,
          page_size: 10
        }
        getViolationGroupChat(params).then(({ data }: any) => {
          console.log('data', data)
          if (data.length === 0) {
            start.value = false
            return console.log('没有数据了')
          }
          violationChat.value.push(...data)
        })
      }
      start.value = true
    }
  }
  // 查询
  const query: any = async (v?:any) => {
    if(v){
      times.value = v.times
      formData.status = v.status
      formData.violation_type = v.violation_type
    }
    if (props.ltType == 0) {
      start.value = true
      let ygparams = {
        wx_userid: props.wx_userid,
        created_at: times.value,
        status: formData.status,
        violation_type: formData.violation_type,
        page: 1,
        page_size: 10
      }
      getViolationChat(ygparams).then(({ data }: any) => {
        violationChat.value = data
      })
    } else {
      start.value = true
      let params = {
        roomid: props.roomid,
        created_at: times.value,
        status: formData.status,
        violation_type: formData.violation_type,
        page: 1,
        page_size: 10
      }
      getViolationGroupChat(params).then(({ data }: any) => {
        violationChat.value = data
      })
    }
    // const el = document.querySelector('.scroll')
    // el.scrollTop = 0
    paged.value = 1
    pageg.value = 1
  }
  // 清空
  const reset: any = () => {
    formData.violation_type = ''
    formData.created_at = []
    formData.status = ''
    times.value = []
    query()
  }
  watch(
    () => props.chatDetailList,
    (val) => {
      searchRef.value.reset()
      // chatDetail(val)
    }
  )
  defineExpose({
    violationChat,
    times
  })
</script>

<style lang="scss" scoped>
  .layout {
    // width: 1242px;
    padding: 15px;
    width: 100%;
    background-color: #fff;
    border: 1px solid #e9e9e9;
    .el-form {
      margin: 16px;
      padding: 14px;
      display: flex;
      flex-wrap: wrap;
      background-color: #f9f9f9;
      .el-form-item {
        box-sizing: border-box;
        flex: 0 0 50%;
        margin-bottom: 0;
        margin-right: 0;
        padding: 0 12px;
        margin: 8px 0;
        &:last-of-type {
          flex: auto;
          text-align: right;
        }
      }
    }

    :deep(.el-form-item__content) {
      display: flex;
      align-items: center;
      .el-select {
        width: 100%;
      }
    }
    :deep(.form-search-button) {
      align-items: center;
      .el-form-item__content {
        display: block;
      }
    }

    .tableData {
      margin: 16px;
      box-sizing: border-box;
      border: 1px solid #eaeaea;
      // width: 100%;
      li:nth-of-type(odd) {
        background-color: #f9f9f9;
      }
      .all {
        display: flex;
        justify-content: space-between;
        padding: 18px 20px 20px;
        border-bottom: 1px solid #eaeaea;

        // height: 100px;
        .information {
          font-size: 14px;
          color: #33302d;
          font-family: STHeitiSC-Light, STHeitiSC;
          line-height: 14px;
          .left_img {
            width: 36px;
            height: 36px;
            margin-top: 12px;
            border-radius: 4px;
          }
          .bad {
            display: flex;
            flex-direction: column;
            margin: 12px 0 0 10px;
          }
        }
        .time {
          .times {
            font-size: 14px;
            color: #969696;
          }
          .context {
            width: 102px;
            line-height: 24px;
            text-align: center;
            background: #ffffff;
            border-radius: 2px;
            border: 1px solid #eaeaea;
            margin: 23px 0 0 27px;
            font-weight: 300;
            color: #33302d;
            font-size: 14px;
            cursor: pointer;
          }
        }
      }
      .notyet {
        width: 100%;
        height: 50px;
        background-color: #f9f9f9;
        text-align: center;
        line-height: 50px;
      }
    }
    .scroll {
      height: 800px;
      overflow: auto;
      overflow-x: hidden;
    }
  }
  .no_data {
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #909399;
    font-size: 14px;
    .no_img {
      margin-left: 35px;
    }
  }
</style>
